<template>
    <div>
        <top-bar></top-bar>
        <left-bar :datas='data'></left-bar>
        <div class="main">
            <div class="main-mains">
                <div class="main-content">
                    <div class="main-mains-top">
                        基础库
                        <el-button
                        size="mini"
                        type="primary"
                        @click="goBack"
                        class="goBack"
                        >返回</el-button>
                    </div>
                    <div class="screen clear">
                        <div class="fl" @click="screen()">筛选</div>
                    </div>
                    <div class="tableSibiling">
                            <el-checkbox
                            v-model="checkAllBoolen"
                            @change="checkAll"
                            >全选当前页</el-checkbox>
                            <el-button size="mini" round type="danger" @click="editStatus(checkIdList,1,'不通过')">不通过</el-button>
                            <el-button size="mini" round type="success" @click="editStatus(checkIdList,2,'发布')">发布</el-button>
                        </div>
                     <div class="publicTable toLongTable">
                        <table class="head_table">
                            <tr>
                                <td width="10%"></td>
                                <td width="10%">序号</td>
                                <td width="16%">分类</td>
                                <td width="25%">文章标题</td>
                                <td width="16%">作者</td>
                                <td width="16%">操作</td>
                            </tr>
                        </table>
                        <el-scrollbar>
                            <table class="content_table">
                                <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                                    <td width="10%">
                                        <el-checkbox v-model="checkIdList" :label="item.article_id" @change="changeValue(index)"></el-checkbox>
                                    </td>
                                    <td width="10%">
                                        {{ (index + 1) + 10 * (pages - 1)}}
                                    </td>
                                    <td width="16%">{{item.categorys}}</td>
                                    <td width="25%">
                                      <span @click="getBaseNewDetail(item.article_id)" class="active">{{item.title}}</span>
                                    <td width="16%">{{item.article_source}}</td>
                                    <td width="16%" class="operation">
                                        <span class="active" @click="editStatus(item.article_id,1,'不通过')">不通过</span>
                                        <router-link class="active" :to="'/editNew?points=0&type=againEdit&articleId='+item.article_id">编辑</router-link>
                                        <span class="active" @click="editStatus(item.article_id,2,'发布')">发布</span>
                                    </td>
                                </tr>
                            </table>
                        </el-scrollbar>
                    </div>
                    <div class="nodataTip" v-if="showNodataTip">
                        <i class="iconfont icon-zanwuneirong"></i>
                        <h5>暂无内容</h5>
                    </div>
                    <div class="orderBotom">
                        <div class="orderBotomRight">
                            <el-pagination @current-change="handleCurrentChange" :page-size="10" :current-page.sync="currentPage" layout="total, prev, pager, next" :total='totalnum'>
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <div class="system-menban" v-if="search">
            </div>
            <div class="systemPopup" v-if="search">
                <div class="topTitle">
                    <span>筛选</span>
                    <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
                </div>
                <div class="systemPopup-con">
                    <div class="systemPopup-cons clear">
                        <div class="fl">分类</div>
                        <div class="fl sel">
                            <el-select
                            v-model="category_id"
                            placeholder="请选择"
                            >
                            <el-option
                                v-for="item in categoryOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="systemPopup-cons clear">
                        <div class="fl">关键词搜索</div>
                        <div class="fl sel">
                            <el-input placeholder="资讯文章标题/关键字" v-model.trim="keyword" clearable>
                            </el-input>
                        </div>
                    </div>
                    <div class="systemPopup-btn clear">
                        <div class="fl" @click="searchs()">确认</div>
                        <div class="fl" @click="hideSystemPopup">取消</div>
                    </div>
                </div>
            </div>
            <!-- 文章详情 -->
              <el-dialog
                title="文章详情"
                :visible.sync="articleDetailDialog"
                width="30%">
                <div class="showDetail">
                  <div class="detailItem clear">
                    <span class="leftTitle">分类</span>
                    <div class="rightContent">{{articleDetail.categorys.name}}</div>
                  </div>
                  <div class="detailItem clear">
                    <span class="leftTitle">标题</span>
                    <div class="rightContent">{{articleDetail.title}}</div>
                  </div>
                  <div class="detailItem clear">
                    <span class="leftTitle">发布时间</span>
                    <div class="rightContent">{{articleDetail.publish_date}}</div>
                  </div>
                  <div class="detailItem clear">
                    <span class="leftTitle">作者</span>
                    <div class="rightContent">{{articleDetail.article_source}}</div>
                  </div>
                  <div class="detailItem clear">
                    <span class="leftTitle">内容</span>
                    <div class="rightContent" v-html="articleDetail.content">{{articleDetail.content}}</div>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button size="small" @click="articleDetailDialog = false">取 消</el-button>
                  <el-button size="small" type="danger" @click="editStatus(articleDetail.article_id,1,'不通过')">不通过</el-button>
                  <el-button size="small" type="success" @click="editStatus(articleDetail.article_id,2,'发布')">发布</el-button>
                </span>
              </el-dialog>
        </div>
    </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import newsMan from "@/api/newsMan";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "newsman",
      pages: 1,
      currentPage:1,
      listData: [],
      totalnum: 0,
      showNodataTip: false,
      search: false,
      keyword: "",
      time: [],
      checkIdList: [],
      allArticleId: [],
      checkAllBoolen: false,
      activeValue: 1,
      inactiveValue: 0,
      category_id:"",
      categoryOptions:[],
      articleDetail:{
        categorys:{
          name:"",
        },
        title:"",
        publish_date:"",
        article_source:"",
        content:""
      },
      articleDetailDialog:false
    };
  },
  mounted() {
    this.getCategory();
    this.getBaseNews();
  },
  methods: {
      //获取分类
    getCategory() {
      let _this = this;
      this.categoryOptions = [];
      let options;
      options = {
        name: "",
        category_id: ""
      };
      newsMan.getCategory(options).then(function(res) {
        let data = res.data;
        if (res.code == 1) {
          for (let i = 0; i < data.length; i++) {
            _this.categoryOptions.push({
              value: data[i].category_id,
              label: data[i].name
            });
          }
        }
      });
    },
    searchs() {
      this.pages = 1;
      this.currentPage = 1;
      this.getBaseNews();
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.currentPage = val;
      this.getBaseNews();
    },
    getBaseNews() {
      this.showNodataTip = false;
      this.allArticleId = [];
      let options;
        options = {
          page_index: this.pages,
          page_size: 10,
          key_word: this.keyword,
          category_id:this.category_id
        };
      newsMan.getBaseNews(options).then(res => {
        if (res.code == 1) {
          this.search = false;
          this.listData = res.data.data;
          this.totalnum = res.data.count;
          for (let i = 0; i < this.listData.length; i++) {
            this.allArticleId.push(this.listData[i].article_id);
          }
          if (!res.data.count) {
            this.showNodataTip = true;
          }
        }
      });
    },
    //获取药品详情
    getBaseNewDetail(id){
      let options;
        options = {
          article_id:id
        };
      newsMan.getBaseNewDetail(options).then(res => {
        if (res.code == 1) {
          this.articleDetail = res.data;
          this.articleDetailDialog = true;
        }
      });
    },
    // 单项的change
    changeValue() {
      if (this.checkIdList.length == this.allArticleId.length) {
        this.checkAllBoolen = true;
      } else {
        this.checkAllBoolen = false;
      }
    },
    //全选的change
    checkAll() {
      if (this.checkAllBoolen) {
        this.checkIdList = this.allArticleId;
      } else {
        this.checkIdList = [];
      }
    },
    //修改资讯状态
    editStatus(id,status,tip){
      if(id instanceof Array && id.length <= 0){
        this.messageAlert("请选择后再操作");
        return;
      }
        this.$confirm("是否" + tip + "选中文章？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
            let options;
            let idArr = [];
            let _this = this;
            if(id instanceof Array){
              idArr = id;
            } else{
              idArr = [id];
            }
            idArr = JSON.stringify(idArr);
            options = {
                article_id:idArr,
                check_status:status
            }
            newsMan.changeBaseArticleStatus(options).then(res => {
            if (res.code == 1) {
              _this.successfulAlert("操作成功");
              _this.getBaseNews();
              _this.checkIdList = [];
              _this.checkAllBoolen = false;
              _this.articleDetailDialog = false;
            }
          });
        })
        .catch(() => {
        });
    },
    goBack() {
      history.go(-1);
    },
    editNew() {
      this.$router.push("/editNew?points=1&type=add");
    },
    screen() {
      this.search = true;
    },
    hideSystemPopup() {
      this.showSystemPopup = false;
      this.search = false;
    },
    //错误弹窗
    messageAlert(msg) {
      this.$message.error(msg);
    },
    //成功弹窗
    successfulAlert(msg) {
      this.$message({
        message: msg,
        type: "success"
      });
    }
  }
};
</script>

<style lang="less">
.showDetail{
  .detailItem{
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea;
    .leftTitle{
      float: left;
      width: 80px;
    }
    .rightContent{
      margin-left: 80px;
    }
  }
}
</style>
